$top-color:#D197FA;
$middle-color:#921EF0;
$bottom-color:#9215F2;
$from:0%;
$middle:25%;
$to:100%;
@mixin gradiend-background($top-col,$middle-col,$bottom-col,$from-where,$middle-stop,$to-where)
{
	background:$top-col;
	background: -moz-linear-gradient(top,  $top-col $from-where, $middle-col $middle-stop, $bottom-col $to-where);
	background: -webkit-gradient(linear, left top, left bottom, color-stop($from-where,$top-col), color-stop($middle-stop,$middle-col), color-stop($to-where,$bottom-col));
	background: -webkit-linear-gradient(top,  $top-col $from-where,$middle-col $middle-stop,$bottom-col $to-where);
	background: -o-linear-gradient(top,  $top-col $from-where,$middle-col $middle-stop,$bottom-col $to-where);
	background: -ms-linear-gradient(top,  $top-col $from-where,$middle-col $middle-stop,$bottom-col $to-where);
	background: linear-gradient(to bottom,  $top-col $from-where,$middle-col $middle-stop,$bottom-col $to-where);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$top-col}', endColorstr='#{$bottom-col}',GradientType=0 );

}
*
{
	margin:0;
	padding:0;
}
body
{
	@include gradiend-background($top-color,$middle-color,$bottom-color,$from,$middle,$to);
	header 
	{
		padding-top: 30px;
        padding-bottom: 5px;
        padding-right: 15px;
        padding-left: 20px;

		div#reg-form-container 
		{
			
            position: absolute;
            margin-top:-90px;
			right:5%;
			float: right;


			div 
			{
				text-align: right;
				
				label
				{
					width: 50px;
                    margin: 5px;
				}

				input 
				{
					width: 130px;
                    border: 1px solid #603382;
                    border-radius: 10px;
                    padding: 2px 5px;
                    margin: 5px;
                    background-color:#B572D6;
				}
			}

			button 
			{
				background-color:#B35EF3;
                font-weight: bold;
                border: 1px solid #C0AFCE;
                border-style: outset;
                border-radius: 10px;
                padding: 5px 8px;
                color:White;

				&:hover 
				{
					background-color: #8949b9;
                    border-style: inset;
					cursor: pointer;
				}
			}
		}

		nav 
		{
            width: 76%;
			height:50px;
            margin: 30px 20px 20px 20px;
            border: 1px solid #000;
            border-radius:15px;

			ul
			{
				li 
				{
					display: inline-block;
					float: left;
					padding-top: 15px;

					a 
					{
						text-decoration: none;
						margin-left:25px;
						color: white;
						font: 1.4em normal Arial;
					}
					
					&:hover > a 
					{
						text-decoration: underline;
						color: Black;
					}
					&:hover > a + ul 
					{
                        display:block;
                    }
					ul.sub-nav-list 
					{
						width:250px;
						position: absolute;
						display: none;
						background-color: rgba(179, 94, 243, 0.9);
						border-radius: 5px;

						li 
						{
							width:250px;
							border-bottom: 1px solid black;
							padding-top:10px;
							padding-bottom:10px;


							&:last-of-type 
							{
								border-bottom: none;
							}
						}

						li.selected 
						{
							a 
							{
								font-weight:bold;
							}
							
						}
					}
					a 
					{
                        font-size: 1.2em;
                        color: #fff;
                    }
				}
			}
			ul.nav-list 
			{
				list-style-type: none;
			}
		}
	}

	section 
	{
        width: 75%;
        float: left;
        color: black;

		article 
		{
            margin: 20px;
            padding: 20px;
            border: 1px solid black;
            color:White;
            border-radius:15px;

			header 
			{
                background: none;
                padding: 5px;

				h1 
				{
                    font-size: 1.4em;
                    padding: 0;
                }
            }

			footer 
			{
                padding: 5px;

				p 
				{
                    font-size: 16px;
                    text-align: right;
                    font-weight: normal;

					time 
					{
                        font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
                    }

					a 
					{
                        text-decoration: none;
                        color:#D59DEB;

						&:hover 
						{
                            text-decoration: underline;   
                        }
                    }
                }
            }
        }
    }

	aside 
	{
		color:white;
        float: left;
        width: 20%;
        margin: 20px;

		& > ul 
		{
            list-style-type: none;

			& > li 
			{
                margin: 15px 0;
                padding: 15px;
                border: 1px solid black;
                border-radius: 5px;

				h2 
				{
                    font-size: 1.1em;
                    font-weight: bold;
                }

				p 
				{
                    margin-top: 10px;
                    margin-right: 5px;
                    margin-bottom: 10px;
                    margin-left: 5px;
                    font-size: 14px;

					a 
					{
                        color: #aaaaaa;
                        text-decoration: none;
                    }

					strong 
					{
                        color: #cccccc;
                        font-weight: bold;
                        font-style: normal;
                    }

					em 
					{
                        color: #cccccc;
                        font-weight: normal;
                        font-style: italic;
                    }
                }

				ul 
				{
                    list-style-type: none;
                    margin-top: 10px;
                    margin-right: 0px;
                    margin-bottom: 10px;
                    margin-left: 0px;
					
					li 
					{
                        margin-top: 5px;
                        margin-left: 0px;
                        margin-bottom: 0px;
                        margin-right: 0px;
                        background-position: 0 50%;
                        padding-left: 10px;
                    }
                }
            }
        }
    }
	
	footer 
	{
        clear: both;
        padding-top: 15px;
        padding-bottom: 25px;
        padding-right: 0px;
        padding-left: 0px;

		p 
		{
			color: White;
            font-size: 1.2em;
            font-weight: bold;
            text-align:center;
        }
    }
}